<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>06_flex</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
			justify-content:flex-start;
			align-items:flex-start;
		}
		.example>nav>a{
			margin: 5px auto;
			display: inline-block;
			text-align: center;
			flex:1;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1>第6节课：弹性盒子</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>一、盒模型解析模式</h4>
			<p>
				box-sizing  盒模型解析模式

				content-box  	标准盒模型(和css2一样的计算) 
					宽度和高度之外绘制元素的内边距和边框 
					width,height外绘制padding,border，盒子大小变大,即:
					默认值 盒子总宽=内容(width)+padding+border

				border-box 	怪异盒模型 
					从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
					width,height内绘制padding,border，盒子大小不变,即:
					怪异盒模型 盒子的总宽=width，会对应得缩小内容部分
					如果border+padding > width，盒子总宽=border+padding，内容部分缩小										
			</p>
			<h4>二、多列布局</h4>
			<p>
				//火狐加前缀-moz-才兼容
				columns:a b;  规定列的宽度和列数
					a : 每列的最小宽度  column-width
					b : 列数 column-count
				column-gap:列之间间隙的大小
				column-rule:列与列之间的边框，值和border一样


				column-width 栏目宽度	
					【length】：用长度值来定义列宽。不允许负值
					  auto：根据 column-count 自定分配宽度

				column-count 栏目列数
					【number】：用整数值来定义列数。不允许负值
					auto： 根据 column-width  自定分配宽度

				column-gap   栏目距离
					&#60;length&gt;：不允许负值 | 
					normal：与 font-size大小相同。

				column-rule  栏目间隔线 （1px solid red）
					column-rule-width ：边框厚度。
						length【不允许负值】|medium（默认）| thin（细的 ）| thick（粗的）
					column-rule-style ：边框样式。
						值：none（默认） | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
					column-rule-color ：边框颜色。

				column-span：none | all	
					none：	不跨列
					all：	横跨所有列
			</p>
			 <h4>三、禁止文字选中</h4>
			 <p>
		 	   1. user-select:none;
		 	   -moz-user-select:none;
		 	   -ms-user-select:none;
			 </p>
			 <h4>四、calc()运算</h4>
			 <p>
			 	calc()使用通用的数学运算规则，但是也提供更智能的功能：

			 	使用“+”、“-”、“*” 和 “/”四则运算；
			 	可以使用百分比、px、em、rem等单位；
			 	可以混合使用各种单位进行计算；
			 	表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
			 	表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
			 	浏览器的兼容性

			 	 .elm {大家在实际使用时，同样需要添加浏览器的前缀
			 		width:-moz-calc(expression);
			 		width:-webkit-calc(expression);
			 		width:calc();
			 	 }
			 </p>
			 <h4>五、盒子阴影</h4>
			 <p>
			 	box-shadow:
			 	h-shadow	必需。水平阴影的位置。允许负值。
			 	v-shadow	必需。垂直阴影的位置。允许负值。
			 	blur		可选。模糊距离。
			 	spread	可选。阴影的尺寸。
			 	color	可选。阴影的颜色。请参阅 CSS 颜色值。
			 	inset	可选。将外部阴影 (outset) 改为内部阴影
			 </p>
			<h4>六、倒影-只有谷歌有效</h4>
			<p>
				1.box-reflect:a b c;

				a : left / right / above / below
				 
				b : 距离本体多远

				c : 遮盖层 url(xxx.png)
			</p>
			<h4>七、弹性盒模型-容器属性</h4>
			<p>
				 1. 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"任何一个容器都可以指定为Flex布局
				   display:flex | inline-flex 定义弹性伸缩盒容器类型
				 		flex		    将对象作为弹性伸缩盒显示。		
				        inline-flex  	将对象作为内联块级弹性伸缩盒显示。
				 	注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
				 容器的属性 以下6个属性设置在容器上
				 flex-direction
				 flex-wrap
				 flex-flow	
				 justify-content	/ justify-content:  在弹性盒对象的 &#60;div&gt; 元素中的各项周围留有空白
				 align-items		/ 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
				 align-content

				 1.1 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
				 交叉轴的开始位置叫做cross start，结束位置叫做cross end。
				 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

				 1.2 flex-wrap：nowrap | wrap | wrap-reverse
				 	控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向
				 	nowrap（默认）：	flex容器为单行，不换行		
				 	wrap：		flex容器为多行。超出换行
				 		wrap-reverse：反转 wrap 排列。
				 （1）nowrap（默认）：不换行。
				 （2）wrap：换行，第一行在上方。
				 （3）wrap-reverse：换行，第一行在下方。

				 1.3 flex-flow：属性是flex-direction属性和flex-wrap属性的简写形式，默认值为（row nowrap）

				 1.4 align-items 属性定义项目在交叉轴上如何对齐 / 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。


					 	align-items: flex-start | flex-end | center | baseline | stretch;
					 	具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下

					 flex-start：	交叉轴的起点对齐。
					 flex-end：	交叉轴的终点对齐。
					 center：	交叉轴的中点对齐。
					 baseline: 	项目的第一行文字的基线对齐。
					 stretch（默认值）：如果项目未设置宽高或设为auto，将沿交叉轴占满整个容器的高度或宽度。

				 1.5 align-content 
				 	属性定义了交叉多根（行）轴线的对齐方式。如果项目只有一根轴线，该属性不起作用
					 	align-content: flex-start | flex-end | center | space-between | space-around | stretch;

					 flex-start：	与交叉轴的起点对齐。
					 flex-end：	与交叉轴的终点对齐。
					 center：		与交叉轴的中点对齐。
					 space-between：	与交叉轴两端对齐，轴线之间的间隔平均分布。
					 space-around：	每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
					 stretch（默认值）：轴线占满整个交叉轴。

					 多行下的align-content会使align-items失效
			</p>
			 <h4>八、弹性盒模型-项目属性</h4>
			 <p>
		 	   以下6个属性设置在项目上。

		 	   	
		 	   order  		项目排序
		 	   flex-grow	项目拓展比例/占父元素的多少分之一
		 	   flex-shrink	项目缩小比例/占其他元素的多少分之一
		 	   flex-basis	定义拓展剩余空间前，的交叉轴的宽/设置初始长度为多少像素
		 	   flex			复合属性/flex: 1 (设置给子元素 子元素平分宽高)
		 	   align-self	自定义项目align-items
				
			   1.1 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可以负值

			   1.2 flex-shrink属性定义了项目的缩小比例，（默认为1），即如果空间不足，该项目将缩小。
			   	元素收缩宽度 =  超出宽度 * 元素收缩比/收缩总比

			   	如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
			   	负值对该属性无效。

			   1.3	flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto

			   		值：&#60;length&gt; | &#60;percentage&gt; | auto | content
			   	 	&#60;length&gt;：	用长度值来定义宽度。不允许负值
			   		&#60;percentage&gt;：	用百分比来定义宽度。不允许负值
			   		auto：		无特定宽度值，取决于其它属性值，auto的计算规则是 检索一下你是否设置了width（或者height值，取决于flex-direction）就会采用这个值，否则的话最后使用的值是 content
			   		content：		基于内容自动计算宽度

			   1.4	flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
			   		flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
			   		该属性有两个快捷值：auto  (1 1 auto)  和 none  (0 0 auto)。
			   		建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

			   1.5 align-self	属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。（默认值为auto），表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

				align-self: auto（默认） | flex-start | flex-end | center | baseline | stretch;		   	
			 </p>		
			 <h4>九、textarea允许调整大小</h4>     
			 <p>
			 	1.resize 和verflow:hidden 一起使用
			 	both	垂直水平都能缩放
			 	none	不能缩放


			 	horizontal	水平可以缩放
			 	vertical	垂直可以缩放

			 	contenteditable='true'
			 </p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a target="case" href="case/0-align-self.html"></a>
			<a target="case" href="case/1-align-items.html"></a>
			<a target="case" href="case/1-flex-grow.html"></a>
			<a target="case" href="case/2-align-content.html"></a>
			<a target="case" href="case/2-flex-shrink.html"></a>
			<a target="case" href="case/3-flex-flow.html"></a>
			<a target="case" href="case/4-flex-direction.html"></a>
			<a target="case" href="case/8-justify-content.html"></a>
			<a target="case" href="case/9-order.html"></a>
			<a target="case" href="case/10-resize.html"></a>
			<a target="case" href="case/11-box-reflect.html"></a>
			<a target="case" href="case/12-box-sizing.html"></a>
			<a target="case" href="case/13-columns.html"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = oCase[i].href.split('case/')[1];
			}
		})();
	</script>
</body>
</html>